<!-- 
* 
* 菜单
* 
 -->
 <template>
    <div>
        <el-row>
            <el-col :xs="24" :md="12">
                <el-row :gutter="10">
                    <el-col :xs="24" :md="12" :lg="6">
                        <el-input v-model="titlekey" placeholder="输入菜单标题进行搜索" clearable></el-input>
                    </el-col>
                    <el-col :xs="24" :md="12" :lg="6">
                        <el-select v-model="menuState" placeholder="菜单状态" clearable>
                            <el-option v-for="item in menuStateList" :key="item.id" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :xs="24" :md="12">
                <el-row justify="end" align="middle">
                    <el-button type="primary" v-auth="'system:menu:query'" @click="getTableData">查询</el-button>
                    <el-button type="primary" v-auth="'system:menu:add'" @click="operateClick('add')">新增</el-button>
                </el-row>
            </el-col>
        </el-row>
        <el-divider class="margin-top-down"></el-divider>
        <el-table 
        :data="menuList" 
        border 
        style="width:100%" 
        :height="tableHeight" 
        row-key="id" 
        stripe
        v-loading="tableLoading">
            <el-table-column label="菜单标题" prop="title" header-align="center" align="center" min-width="120"></el-table-column>
            <el-table-column label="菜单图标" prop="icon" header-align="center" align="center" min-width="100">
                <template #default="scope">
                    <div class="table-column-icon">
                        <component :is="scope.row.icon" :index="scope.row.id" v-if="scope.row.icon"></component>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="菜单排序" prop="sort" header-align="center" align="center" min-width="100"></el-table-column>
            <el-table-column label="组件路径" prop="component" show-overflow-tooltip header-align="center" align="center" min-width="100"></el-table-column>
            <el-table-column label="菜单状态" prop="state" header-align="center" align="center" min-width="100">
                <template #default="scope">
                    <el-tag type="success" v-if="scope.row.state">正常</el-tag>
                    <el-tag type="danger" v-else>停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createdAt" show-overflow-tooltip header-align="center" align="center" min-width="100" :formatter="setFormatter"></el-table-column>
            <el-table-column label="更新时间" prop="updatedAt" show-overflow-tooltip header-align="center" align="center" min-width="100" :formatter="setFormatter"></el-table-column>
            <el-table-column label="操作" width="340" header-align="center" align="center" fixed="right">
                <template #default="scope">
                    <el-button type="primary" v-auth="'system:menu:add'" plain @click="operateClick('add', scope.row)" v-if="scope.row.type != 3">新增</el-button>
                    <el-button type="info" plain @click="operateClick('view', scope.row)">查看</el-button>
                    <el-button type="warning" v-auth="'system:menu:update'" plain @click="operateClick('update', scope.row)">修改</el-button>
                    <el-button type="danger" v-auth="'system:menu:delete'" plain @click="deleteClick(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- updateMenusList : 更新表格数据 -->
        <MenusOperate @updateMenusList="getTableData" ref="menusOperateRef" />
    </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { menusApi } from '@/api/system/menus/menus-api';
import { ElMessage, ElMessageBox } from 'element-plus'

import { setTableHeight, deepClone, setTreeData } from '@/utils/tools-util';
import { formatTimeToStr } from '@/utils/date-util.js';

import MenusOperate from './menus-operate/menus-operate.vue';
// ========================= 实列挂载之前调用 =========================
onBeforeMount(() => {
    getTableData();
});

// ========================= 实列挂载之后调用 =========================
onMounted(() => {
    tableHeight.value = setTableHeight(240);
});

// ========================= 表格高度 =========================
let tableHeight = ref();
window.onresize = () => {
    tableHeight.value = setTableHeight(240);
};

// ========================= 表格数据 =========================
let menuList = ref([]);
// 搜索
const menuState = ref('');
const titlekey = ref('');
let tableLoading = ref(false);
const menuStateList = reactive([
    {id:1, label:'正常', value:true},
    {id:2, label:'停用', value:false},
]);
async function getTableData () {
    try {
        let conditions = {
            params: {
                title:titlekey.value,
                state:menuState.value,
            },
        };
        tableLoading.value = true;
        const res = await menusApi.list(conditions);
        if(res.meta.status !== 200) throw new Error(res.meta.msg);
        let data = res.data.data;
        menuList.value = setTreeData(data, 'id', 'parentId', 'children', false);
        tableLoading.value = false;
    } catch (e) {
        console.error(e);
        ElMessage.error(e.message);
    } finally {
        tableLoading.value = false;
    }
    
};


// 格式化内容
function setFormatter(row, column, cellValue, inedx) {
    return formatTimeToStr(cellValue)
};

// 删除菜单项
 function deleteClick(row) {
    ElMessageBox.confirm(
        '确定要删除当前菜单项吗？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        try {
            let params = {
                id: row.id
            };
            const res = await menusApi.delete(params);
            if(res.meta.status !== 200) throw new Error(res.meta.msg);
            ElMessage.success('删除成功');
            getTableData();
        } catch (e) {
            console.error(e);
            ElMessage.error(e.message);
        };
    })
};

// ========================= 弹框操作 =========================
const menusOperateRef = ref();
function operateClick(type, row) {
    menusOperateRef.value.onShowDialog(type, row);
};

</script>

<style lang="scss" scoped>
.table-column-icon {
    width: 18px;
    margin: auto;
}
</style>